$primary-color: #409eff;
$primary-background-color: #ecf5ff;

.home-layout {
  height: 100%;
  display: flex;
  /* flex-direction: column; */
  /* justify-content: stretch; */
}
.home-layout-content {
  padding: 0 10px;

  .ant-layout-header {
    height: 45px;
    padding: 0;
    line-height: 45px;
    background-color: #fff;
  }
}
.widget-config-container {
  padding: 0 10px;

  .ghost{
    background: #fff;
    border: 1px dashed $primary-color;
  
    &::after{
      content: '';
      background: #fff;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}

.widget-option-list {
  overflow: hidden;
  padding: 0 10px 10px;
  
  li {
    float: left;
    width: 48%;
    margin: 1%;
  }
  .widget-option-item {
    display: block;
    height: 32px;
    border: 1px dashed transparent;
    line-height: 32px;
    text-align: center;
    cursor: move;
    color: #333;
    background-color: #f4f6fc;

    &:hover {
      border-color: $primary-color;
      color: $primary-color;
    }
    .label {
      display: inline-block;
      margin-left: 8px;
      vertical-align: middle;
      font-size: 12px;
    }
  }
}

.widget-form-list {
  min-height: 600px;
  margin: 10px 0;
  background: #fff;
  border: 1px dashed #999;

  .widget-col-list{
    min-height: 50px;
    border: 1px dashed #ccc;
    background: #fff;
  }

  .widget-view {
    margin: 2px;
    padding-bottom: 18px;
    position: relative;
    border: 1px dashed rgba(170, 170, 170, 0.7);
    background-color: rgba(236, 245, 255, 0.3);
    overflow: hidden;

    .ant-form-item {
      margin-bottom: 0;
    }

    &.is_req {
      .el-form-item__label::before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }
    }
    .widget-view-model {
      position: absolute;
      right: 4px;
      top: 0;
      color: $primary-color;
      font-size: 12px;
      line-height: 28px;
      z-index: 9;
    }
    .widget-view-action {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 28px;
      line-height: 28px;
      background: $primary-color;
      z-index: 9;

      i {
        font-size: 14px;
        color: #fff;
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .widget-view-drag {
      position: absolute;
      left: -2px;
      top: -2px;
      bottom: -18px;
      height: 28px;
      line-height: 28px;
      background: $primary-color;
      z-index: 9;
      // display: none;

      i {
        font-size: 14px;
        color: #fff;
        margin: 0 5px;
        cursor: move;
      }
    }

    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: block;
      z-index: 1;
    }

    &:hover {
      background: $primary-background-color;
      outline: 1px solid $primary-color;
      outline-offset: 0px;

      &.active {
        outline: 2px solid $primary-color;
        border: 1px solid $primary-color;
        outline-offset: 0;
      }

      .widget-view-drag {
        display: block;
      }
    }

    &.active {
      outline: 2px solid $primary-color;
      border: 1px solid $primary-color;
    }

    &.ghost {
      background: #f56c6c;
      border: 2px solid #f56c6c;
      outline-width: 0;
      height: 3px;
      box-sizing: border-box;
      font-size: 0;
      content: "";
      overflow: hidden;
      padding: 0;
    }
  }

  .widget-col{
    padding-bottom: 0;
    padding: 5px;
    // margin-left: 2px !important;
    // margin-right: 2px !important;
    background-color: rgba(253,246,236, .3);

    &.active{
      outline: 2px solid #e6a23c;
      border: 1px solid #e6a23c;
    }
    &:hover{
      background: #fdf6ec;
      outline: 1px solid #e6a23c;
      outline-offset: 0px;

      &.active{
        outline: 2px solid #e6a23c;
        border: 1px solid #e6a23c;
        outline-offset: 0;
      }
    }
    &.ghost{
      background: #F56C6C;
      border: 2px solid #F56C6C;
      outline-width: 0;
      height: 3px;
      box-sizing: border-box;
      font-size: 0;
      content: '';
      overflow: hidden;
      padding: 0;
    }
    .widget-view-action.widget-col-action{
      background: #e6a23c;
    }
    .widget-view-drag.widget-col-drag{
      background: #e6a23c;
    }
    &::before{
      display: none;
    }
  }
  .ghost{
    padding: 0;
    height: 3px;
    background: #F56C6C;
    border: 2px solid #F56C6C;
    outline-width: 0;
    box-sizing: border-box;
    font-size: 0;
    content: '';
    overflow: hidden;
  }
}
